<template>
    <el-dialog ref="dialogform" :title="`查看${data.cwarehousename}详情`" :visible.sync="dialogVisible" width="90%"
        :before-close="handleClose">
        <div class="tableContent">
            <TableData :config="table_config" :tableThead="tableThead"
                :dataList="dataList" :loading="loading">
            </TableData>
        </div>
        <Pagination class="pagination" @current-change="handleCurrentChange" :size="size" :page="page" :total="total">
        </Pagination>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
        </span>
        <el-dialog append-to-body ref="form" title="编辑投塘记录" :visible.sync="dialogVisibleForm" width="60%"
            :before-close="closeFome">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" height="200"
                class="demo-ruleForm">
                <el-form-item label="投塘数量" prop="num">
                    <el-input v-model="ruleForm.num" clearable placeholder="请输入数量" type="number" class="w100p">
                        <template slot="append">尾</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="投塘重量" prop="weight">
                    <el-input v-model="ruleForm.weight" placeholder="请输入重量" clearable type="number" class="w100p">
                        <template slot="append">斤</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submitForm" v-loading="loadingForm">确 定</el-button>
            </span>
        </el-dialog>
    </el-dialog>
</template>
<script>
import pondStockingManagement from '@/api/production-management/pond-stocking-management.js';
import ncproductionApi from "@/api/production-management-nc/index";
import Pagination from '@/components-production-management/Pagination';
import TableData from '@/components-production-management/TableData';
export default {
    components: { Pagination, TableData },
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        let checkNum = (rule, value, callback) => {
            if (value) {
                if (Number(value) > 0 && Number(value) <= 99999) {
                    callback();
                } else if (Number(value) > 99999) {
                    callback(new Error('请输入小于100000的数'));
                } else {
                    callback(new Error('请输入大于0的数'));
                }
            } else {
                callback(new Error('请输入数值'));
            }
        };
        return {
            dialogVisibleForm: false,
            loading: false,
            loadingForm: false,
            ruleForm: {},
            page: 1,
            size: 10,
            total: 10,
            isChooseWeighting: false,
            addEditName: '添加',
            addEditApi: pondStockingManagement.edit,
            ruleForm: {},
            dataList: [],
            formAddEditFlag: 'add',
            formData: {},
            rules: {
                num: [
                    { required: true, validator: checkNum, trigger: 'change' }
                ],
                weight: [
                    { required: true, validator: checkNum, trigger: 'change' }
                ]
            },
            // 配置项
            table_config: {
    
            },
            tableThead: [
                { isShow: true, label: '单据号', prop: 'vbillcode' },
                { isShow: true, label: '日期', prop: 'dbilldate' },
                { isShow: true, label: '类型', prop: 'types' },
                { isShow: true, label: '品种', prop: 'cmaterialoname' },
                { isShow: true, label: '条数', prop: 'vbdef1' },
                { isShow: true, label: '重量', prop: 'nnum' },
                { isShow: true, label: '批次号', prop: 'vproductbatch' }
            ],
        }
    },
    computed: {},
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },

    mounted() { },
    methods: {
        initData() {

            this.loading = true;
            let { vproductbatch, cwarehouseid } = this.data
            if (cwarehouseid && vproductbatch) {
                this.queryPageByCondition()
            }
        },
        //翻页查询
        handleCurrentChange(page) {
            this.page = page;
            this.queryPageByCondition();
        },
        //查询
        queryPageByCondition() {
            this.loading = true;
            let params = {
                page: this.page,
                size: this.size,
                entity: {
                    vproductbatch: this.data.vproductbatch,
                    cwarehouseid: this.data.cwarehouseid
                }
            }
            ncproductionApi.queryMaterialDetail(params).then(res => {
                this.loading = false;
                if (res.success == 1) {
                    this.dataList = res.data.content || [];
                    this.total = res.data.totalElements;
                    if (res.data.totalPages && this.page > res.data.totalPages) {
                        this.page = res.data.totalPages;
                        this.queryPageByCondition();
                    }
                } else {
                    this.$message.warning(res.message || '分页查询失败')
                }
            }).catch(err => {
                this.loading = false;
                console.log(err)
            })
        },

        // table操作方法
        handleRow(rowData,item) {
            if (item.flag == 'edit') {
                this.dialogVisibleForm = true;
                this.ruleForm = JSON.parse(JSON.stringify(rowData))
            } else if (item.flag == 'del') {
                this.delList([rowData]);
            }
        },
        closeFome() {
            this.dialogVisibleForm = false;
        },
        //批量删除
        delList(deleteList = [], key = 'inputPondId') {
            let list = []
            deleteList.forEach(item => {
                list.push(item[key])
            })
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await pondStockingManagement.delListById(list);
                if (res.success) {
                    this.$message.success(res.message || '删除成功');
                    this.queryPageByCondition();
                } else {
                    this.$message.warning(res.message || '删除失败');
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //提交表单
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loadingForm = true;
                    this.addEditApi({ ...this.ruleForm }).then(res => {
                        this.loadingForm = false;
                        let msg = res.success ? '操作成功' : '操作失败'
                        this.$message[res.success ? 'success' : 'warning'](res.message || msg)
                        res.success && this.cancelForm();
                    }).catch(err => {
                        this.loadingForm = false;
                        console.log(err)
                    })
                } else {
                    return false;
                }
            })
        },
        //取消关闭
        cancel() {
            this.$emit("closeDialog")
        },
        cancelForm() {
            this.dialogVisibleForm = false;
            this.queryPageByCondition();
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.pagination {
    text-align: right;
    margin-top: 15px;
}

.tableContent {
    height: 500px;
    width: 100%;
}
</style>